<template>
  <div class="city">
    <Topbar :title="cityName" :gobackEnabled="true"/>
    <form class="formbox" @submit.prevent>
      <div>
        <input
          class="input-style input-address"
          type="search"
          name="address"
          placeholder="输入学校、商务楼、地址"
          required
          v-model="searchInput"
        >
      </div>
      <div>
        <input class="input-style button-submit" type="submit" name="submit" @click="doSearch" value="提交">
      </div>
    </form>
    <div class="address-wrapper">
      <div v-if="historyVisible">搜索历史</div>
      <ul v-if="addressList.length > 0">
        <li v-for="(address, i) in addressList" :key="i" @click="setNewAddress(address)">
          <h4>{{address.name}}</h4>
          <p>{{address.address}}</p>
        </li>
      </ul>
      <div v-if="historyVisible" class="clear-button" @click="clearAddressHistory()">清空所有</div>
      <div v-if="searchIsEmpty">很抱歉！无搜索结果</div>
    </div>
  </div>
</template>
<script>
import Topbar from '../../components/Topbar';
import {
  getCityName,
  getSearchAddressHistory,
  setSearchAddressHistory,
  clearAddressHistory,
  getSearchAddress
} from '../../etc/datas';
import { mapActions } from 'vuex';
export default {
  name: 'city',
  data() {
    return {
      cityId: '',
      cityName: '',
      searchInput: '', //输入的搜索参数
      historyEnabled: true, //是否显示历史记录，一旦搜索过了就设置为false
      addressList: [],
      searchIsEmpty: false
    };
  },
  computed: {
    historyVisible() {
      return this.historyEnabled && this.addressList.length > 0;
    }
  },
  components: {
    Topbar
  },
  methods: {
    ...mapActions(['setPositionId']),
    doSearch() {
      if (this.searchInput) {
        getSearchAddress(
          data => {
            this.historyEnabled = false;
            this.addressList = data;
            this.searchIsEmpty = data.length === 0;
          },
          this.cityId,
          this.searchInput
        );
      }
    },
    setNewAddress(newAddress) {
      getSearchAddressHistory(data => {
        if (data.length === 0) {
          data.push(newAddress);
        } else {
          // 过滤掉自己
          data = data.filter(address => address.geohash !== newAddress.geohash);
          if (data.length === 10) {
            // 假如历史记录已满，则把最后一条删除
            data.pop();
          }
          data.unshift(newAddress); // 顶部插入新记录
        }
        setSearchAddressHistory(data);
        this.setPositionId(newAddress.geohash);
        this.$router.push({
          path: '/msite',
          query: {}
        });
      });
    },
    clearAddressHistory() {
      clearAddressHistory();
      this.addressList = [];
    }
  },
  mounted() {
    this.cityId = this.$route.params.cityid;
    getCityName(data => {
      this.cityName = data.name;
    }, this.cityId);
    getSearchAddressHistory(data => {
      this.addressList = data;
    });
  }
};
</script>
<style lang="scss">
@import '../../styles/mixin';
.city {
  .formbox {
    background-color: #fff;
    border-top: 1px solid $bc;
    border-bottom: 1px solid $bc;
    padding-top: 0.4rem;
    div {
      width: 90%;
      margin: 0 auto;
      text-align: center;
    }
  }
  .input-style {
    border-radius: 0.1rem;
    margin-bottom: 0.4rem;
    @include wh(100%, 1.4rem);
  }
  .input-address {
    border: 1px solid $bc;
    padding: 0 0.3rem;
    @include sc(0.65rem, #333);
  }
  .button-submit {
    background-color: $blue;
    @include sc(0.65rem, #fff);
  }
  .address-wrapper {
    div {
      border-top: 1px solid $bc;
      border-bottom: 1px solid $bc;
      padding-left: 0.5rem;
      @include font(0.475rem, 0.8rem);
    }
    ul {
      background-color: #fff;
      border-top: 1px solid $bc;
      li {
        margin: 0 auto;
        padding-top: 0.65rem;
        border-bottom: 1px solid $bc;
        h4 {
          margin: 0 auto 0.35rem;
          width: 90%;
          @include sc(0.65rem, #333);
        }
        p {
          width: 90%;
          margin: 0 auto 0.55rem;
          @include sc(0.45rem, #999);
        }
      }
    }
    .clear-button {
      @include sc(0.7rem, #666);
      text-align: center;
      line-height: 2rem;
      background-color: #fff;
    }
  }
}
</style>

